<template>
  <!-- 网点管理 -->
  <view class="content">
    <!-- 搜索栏 -->
    <view class="main-bgColor">
      <uni-search-bar
        placeholder="请输入网点名称"
        @confirm="loadData(1)"
        @blur="loadData(1)"
        @cancel="cancel"
        @clear="cancel"
        v-model="state.param.networkName"
      ></uni-search-bar>
    </view>

    <!-- 网点列表 -->
    <view class="list">
      <view
        class="item flex flex-y-center bg-white"
        @click="$jump.navigateTo(`/pages/network/info?id=${item.id}`)"
        v-for="item in state.dataSource"
        :key="item.id"
      >
        <image
          v-if="item.networkCover"
          class="img mr20"
          :src="item.networkCover"
        ></image>
        <view class="text flex1">
          <view class="fz28 gray3">{{ item.networkName }}</view>
          <view class="mt10 fz24 fff">
            <text class="tags bg-green" v-if="item.online">设备在线</text>
            <text class="tags bg-gray9" v-else>设备离线</text>
          </view>
          <view class="address mt10 gray6 fz26"
            >地址：{{ item.provinceCn }}{{ item.cityCn }}{{ item.areaCn
            }}{{ item.streetCn }}{{ item.detailAddress }}</view
          >
          <view class="flex flex-x-end mt10 fz26">
            <view
              @click.stop="
                openMapLocation(
                  item.longitude,
                  item.latitude,
                  item.networkName,
                  item.locationAddress
                )
              "
            >
              <sw-icons
                class="mr10"
                icon="icon-daohang"
                size="34"
                color="#487fff"
              ></sw-icons>
              导航
            </view>
          </view>
        </view>
      </view>
    </view>

    <uni-load-more :status="mix.loading"></uni-load-more>
  </view>
</template>

<script setup>
import minix from "@/common/js/mixin.js";
import { reactive, getCurrentInstance } from "vue";
import { onLoad, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
import { getNetworkList } from "@/common/js/getData.js";

const { proxy } = getCurrentInstance();
const { mix } = minix();
const state = reactive({
  param: {
    networkName: "",
  },
  dataSource: [],
  businessStatusOptions: [],
});

// 获取数据
const loadData = (page) => {
  if (mix.isSend) {
    return;
  }
  mix.isSend = true;
  mix.loading = "loading";
  if (page >= 0) {
    mix.query.pageNo = page;
  }
  if (page === 1) {
    state.dataSource = [];
  }
  const data = { ...mix.query, ...state.param };
  getNetworkList(data)
    .then((res) => {
      state.dataSource = state.dataSource.concat(res.result.records);
      mix.query.pageNo++;
      if (
        !res.result.records ||
        res.result.records.length < mix.query.pageSize
      ) {
        mix.loading = "noMore";
      } else {
        mix.loading = "more";
      }
    })
    .finally(() => {
      mix.isSend = false;
      uni.stopPullDownRefresh();
    });
};

// 页面加载完成
onLoad(async () => {
  await proxy.$onLaunched;
  loadData();
});

// 页面滚动到底部
onReachBottom(() => {
  if (mix.loading === "noMore") return;
  loadData();
});

// 下拉刷新
onPullDownRefresh(() => {
  loadData(1);
});

// 这里传入的三个参数分别是  要去的  经度 纬度 以及 地址信息
const openMapLocation = (
  longitude,
  latitude,
  name = "未命名",
  address = ""
) => {
  if (!latitude || !longitude) {
    uni.showToast({
      icon: "none",
      title: "该网点未设置地点",
    });
    return;
  }
  // 获取定位信息
  uni.getLocation({
    type: "wgs84", //返回可以用于uni.openLocation的经纬度
    // 用户允许获取定位
    success: function (res) {
      if (res.errMsg == "getLocation:ok") {
        uni.openLocation({
          // 传入你要去的纬度
          latitude: +latitude,
          // 传入你要去的经度
          longitude: +longitude,
          name: name,
          // 传入你要去的地址信息 不填则为空
          address: address,
          // 缩放大小
          scale: 18,
        });
      }
    },
    // 用户拒绝获取定位后 再次点击触发
    fail: function (res) {
      if (res.errMsg == "getLocation:fail auth deny") {
        uni.showModal({
          content: "检测到您没打开获取信息功能权限，是否去设置打开？",
          confirmText: "确认",
          cancelText: "取消",
          success: (res) => {
            if (res.confirm) {
              uni.openSetting();
            } else {
              return false;
            }
          },
        });
      }
    },
  });
};

// 搜索取消
const cancel = () => {};
</script>

<style lang="less" scoped>
@import url("@/common/less/common.less");

.list {
  padding: 0 20rpx;
  .item {
    padding: 30rpx;
    margin: 20rpx 0;
    border-radius: 20rpx;
    box-shadow: 0 5rpx 10rpx rgba(#000, 0.1);
    .img {
      width: 240rpx;
      height: 170rpx;
    }
    .tags {
      display: inline-block;
      padding: 10rpx 20rpx;
      border-radius: 10rpx;
    }
    .address {
      line-height: 1.5;
    }
  }
}
</style>
